<template>
    <div class="ai-search">
      <!-- 标题区域 -->
      <h1>AI 搜索</h1>
      <p class="subtitle">实时咨询，丰富信息，整合搜索</p>
  
      <!-- 搜索框区域 -->
      <div class="search-bar">
        <input
          type="text"
          v-model="query"
          placeholder="搜索，提问式发送消息"
          @keydown.enter="handleSearch"
        />
        <el-icon @click="handleVoiceSearch"><mic /></el-icon>
        <el-icon @click="handleSearch"><arrow-right /></el-icon>
      </div>
  
      <!-- 搜索结果展示区域 -->
      <div class="results" v-if="results.length">
        <div class="result-item" v-for="(result, index) in results" :key="index">
          <img :src="result.image" alt="result image" />
          <div class="content">
            <h4>{{ result.title }}</h4>
            <p>{{ result.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  
  // 搜索输入框绑定变量
  const query = ref('')
  
  // 搜索结果数组，添加一些默认数据
  const results = ref([
    {
      image: 'https://via.placeholder.com/50',
      title: '日本 10 个隐藏的旅游胜地？',
      description: '探索那些不为人知的日本景点，避开游客并享受真正的休闲时光。',
    },
    {
      image: 'https://via.placeholder.com/50',
      title: '网购这么火爆，快递从哪来，成本有多高？',
      description: '揭秘物流背后的秘密，快递是如何运转的？成本从何而来？',
    },
    {
      image: 'https://via.placeholder.com/50',
      title: '乳制品是否真的健康，五种真相可能颠覆？',
      description: '乳制品对健康真的有益吗？科学家们的最新研究结果让人意外。',
    },
    {
      image: 'https://via.placeholder.com/50',
      title: '存款利率 4%，专家告诉你分散资产？',
      description: '专家建议如何通过多种方式分散投资，让你的财富更稳定。',
    },
    {
      image: 'https://via.placeholder.com/50',
      title: 'Steam 春促开启，《巫师3》限时优惠？',
      description: 'Steam 最新春促开启，众多热门游戏限时优惠，快来了解详情！',
    },
  ])
  
  // 搜索方法
  function handleSearch() {
    if (!query.value.trim()) {
      ElMessage.warning('请输入搜索内容！')
      return
    }
    // 模拟搜索操作，直接更新结果
    results.value = [
      {
        image: 'https://via.placeholder.com/50',
        title: `搜索结果 1：${query.value}`,
        description: `与“${query.value}”相关的内容展示。`,
      },
      {
        image: 'https://via.placeholder.com/50',
        title: `搜索结果 2：${query.value}`,
        description: `更多与“${query.value}”相关的内容展示。`,
      },
    ]
  }
  
  // 语音搜索方法（占位功能）
  function handleVoiceSearch() {
    ElMessage.info('语音搜索功能正在开发中...')
  }
  </script>
  
  <style scoped>
  .ai-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  
    h1 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 8px;
    }
  
    .subtitle {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
    }
  
    .search-bar {
      display: flex;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 24px;
      padding: 8px 16px;
      width: 400px;
  
      input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 16px;
      }
  
      el-icon {
        cursor: pointer;
        margin-left: 8px;
      }
    }
  
    .results {
      margin-top: 20px;
      width: 400px;
  
      .result-item {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
  
        img {
          width: 60px;
          height: 60px;
          margin-right: 10px;
          border-radius: 8px;
        }
  
        .content {
          text-align: left;
  
          h4 {
            margin: 0;
            font-size: 16px;
            font-weight: bold;
          }
  
          p {
            margin: 4px 0 0;
            color: #666;
            font-size: 14px;
          }
        }
      }
    }
  }
  </style>
  